<template>
	<view class="fixed-btn-wrap">
		<view class="fixed-btn" @click="handleClickFixBtn">
			<image src="../../../static/images/icon_menu.png" mode="widthFix" class="fixed-btn-icon"></image>
		</view>
		<view class="fixed-poup" v-if="showSideMenu">
			<view class="prelative">
				<!-- 新建按钮是固定的 -->
				<view class="fixed-poup-row" @click="createPage">
					<image src="../../../static/images/icon_menu_01.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">新增批示</text>
				</view>
				<view class="fixed-poup-row"  @click="cancelSend" v-if="hiddenShow">
					<image src="../../../static/images/icon_menu_03.png" mode="widthFix" class="fixed-poup-icon">
					</image>
					<text class="fixed-poup-text">取消送报</text>
				</view>
				<view class="fixed-poup-close" @click="handleClose">
					<image src="../../../static/images/icon_menu_close.png" mode="widthFix" class="fixed-poup-close-icon"></image>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"float-menu",
		data() {
			return {
				showSideMenu:false
			};
		},
		props:{
			hiddenShow:{
				type:Boolean,
				defualt:false
			}
		},
		methods:{
			handleClickFixBtn(){
				this.showSideMenu = true;
				this.$emit('onBtnClick')
			},
			handleClose(){
				this.showSideMenu = false;
				this.$emit('onClose')
			},
			createPage(){
				console.log('点击添加批示')
				this.showSideMenu = false;
				this.$emit('add')
			},
			cancelSend(){
				console.log('点击取消送报')
				this.showSideMenu = false;
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
.fixed-btn {
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 10px 0px rgba(84, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;

		.fixed-btn-icon {
			width: 40rpx;
		}
	}

	.fixed-poup {
		position: fixed;
		z-index: 20;
		width: 240rpx;
		height: 148rpx;
		border-radius: 10px;
		background: #FFFFFF;
		padding: 30rpx;
		bottom: 20rpx;
		right: 20rpx;
		z-index: 90;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		.fixed-poup-row {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.fixed-poup-icon {
			width: 30rpx;
			margin-right: 20rpx;
		}

		.fixed-poup-text {
			font-size: 26rpx;
			color: #414a5d;
		}
		.fixed-poup-close{
			position: absolute;
			right: -15px;
			top:-15px;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.fixed-poup-close-icon{
			width: 20rpx;
		}
		
	}
</style>
